<template>
  <el-dialog
    top="150px"
    width="50%"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-container>
      <el-main
        :style="{ 'max-height': maxHeightDialog }"
        class="container-main"
      >
        <div>
          <el-form size="small" label-position="right">
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备编码" label-width="80px">
                  <el-input
                    v-model="searchModel.deviceSource"
                    placeholder="设备编码"
                    clearable
                    class="filter-item search-item"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备名称" label-width="80px">
                  <el-input
                    v-model="searchModel.deviceName"
                    placeholder="设备名称"
                    clearable
                    class="filter-item search-item"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备类型" label-width="80px">
                  <el-select
                    v-model="searchModel.deviceType"
                    placeholder="设备类型"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in deviceDictionaries"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" style="margin-left: 10px">
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="toSearch"
                    style="margin-right: 10px"
                    >搜索</el-button
                  >
                  <el-button type="info" @click="toReset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-table
            ref="elTable"
            v-loading="loading"
            size="medium "
            :data="dataList"
            :row-key="(row) => row.id"
            style="width: 100%"
            @selection-change="onSelectionChange"
            tooltip-effect="dark"
          >
            <af-table-column
              label="设备名称"
              style="padding-left: 60px"
              width="300"
            >
              <template slot-scope="{ row }">
                <el-radio
                  v-model="selectedDeviceId"
                  :label="row.id"
                  @input="onInput(row)"
                  :disabled="row.disabled"
                >
                  {{ row.deviceName }}
                </el-radio>
              </template>
            </af-table-column>
          
            <af-table-column
              align="center"
              label="设备编码"
              prop="deviceSource"
            />

            <af-table-column
              align="center"
              label="设备区分"
              prop="deviceIsLine"
            >
              <template slot-scope="{ row }">
                {{ row.deviceIsLine == 1 ? '智能无线' : '传统无线' }}
              </template>
            </af-table-column>
            <af-table-column
              align="center"
              label="设备类型"
              prop="deviceTypeStr"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            :page-sizes="pageSizeOptions"
            @pagination="getDataList"
          />
        </div>
      </el-main>

      <el-footer>
        <el-button
          size="small"
          type="primary"
          style="margin-right: 10px; float: right"
          @click="toSubmit"
        >
          确定
        </el-button>
        <el-button
          size="small"
          style="margin-right: 10px; float: right"
          @click="isVisible = false"
        >
          取消
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import dataTableMixins from '@/mixins/data-table-mixins'
import deviceManageApi from '@/api/device-manage'
import Pagination from '@/components/Pagination'
export default {
  name: 'SelecteDevice',
  components: {
    Treeselect,
    Pagination,
  },
  mixins: [dataTableMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    deviceIds: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      maxHeightDialog: this.getHeightAndWidth(),
      deviceDictionaries: [],
      selectedDevice: {},
      selectedDeviceId: null,
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },

  mounted() {
    this.getDictValueAttr()
  },
  methods: {
    toClose() {
      this.$emit('close')
    },
    getHeightAndWidth() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      return clientHeight - 300 + 'px'
    },
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue

        this.getDataList()
      })
    },

    getDataList() {
      this.loading = true
      const searchModel = this.formatSearchData(this.searchModel)

      deviceManageApi
        .getDeviceList({ ...this.pagination, ...searchModel })
        .then((ret) => {
          this.dataList = ret.data.data.rows

          this.dataList.forEach((ele, i) => {
            this.deviceDictionaries.forEach((ele1, i1) => {
              if (Number(ele.deviceType) === ele1.dictValue) {
                ele.deviceTypeStr = ele1.dictText
              }
            })

            this.deviceIds.forEach((item, j) => {
              if (ele.id == item) {
                ele.disabled = true
              }
            })
          })

          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch() {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset() {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSelectionChange(selection) {
      this.selectedDataList = selection
    },
    toEmptySelection() {
      this.$refs.elTable.clearSelection()
    },
    indexMethod(index) {
      return this.formatIndex(index, this.pagination)
    },

    onInput(data) {
      this.selectedDevice = data
    },

    toSubmit() {
      if (!this.selectedDevice.id) {
        this.$message({
          message: '请选择设备！',
          type: 'warning',
        })
        return
      }
      this.isVisible = false
      this.$emit('submit', this.selectedDevice)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
.title {
  color: #383838;
  font-size: 16px;
  border-bottom: 1px solid #dedede;
  padding: 3px 5px;
  border-radius: 5px;
  margin-top: 3px;
  margin-bottom: 8px;
}
::v-deep .el-table td:last-child {
  border-left: 0px solid #ebeef5;
}
::v-deep.el-table th.is-leaf:first-child {
  padding-left: 60px;
}
::v-deep.el-radio__label {
  padding-left: 40px;
}
</style>
